<template>
	<vi-drawer ref="specialMenu" position="absolute" width="75%">
		<view class="vi_specialMenu">
			<view class="vi_specialMenu_toolbar">
				<vi-searchbar buttonStyle="active" :initSearch="false" :value="keyword" :text="text" @search="onSearch"></vi-searchbar>
			</view>
			<scroll-view scroll-y class="vi_specialMenu_scroll" @touchmove.stop>
				<view class="vi_Row" :class="{'vi_specialMenu_active':currAdd==index}" v-for="(item, index) in showList" :key="index" @click="onSubmit(item, index)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
	</vi-drawer>
</template>

<script>
	// 数据集：specialOptions。格式：
	// [
	// 	{name:"功能名称",func:"功能键名"},
	// ]
	export default {
		name:"viFormulaEditorSpecialMenu",
		props: {
			//所有附件组件数据的集合
			dataSet:{},
			text:{
				type:[Object,null],
				default:()=>({})
			},
		},
		data(){
			return {
				dataList:null,
				showList:[],
				keyword:"",
				currAdd:-1,		//点击添加的项，下标
				addTimer:null,	//添加项显示状态延时器
			}
		},
		computed:{
			
		},
		methods:{
			open(){
				this.$refs.specialMenu.open()
			},
			close(){
				this.$refs.specialMenu.close()
			},
			//初始化数据
			initData(){
				//specialOptions为当前组件使用的数据集
				this.dataList = (this.dataSet && this.dataSet.specialOptions) ||[];
				this.showList = this.dataList;
			},
			//执行过滤
			onSearch(e){
				this.keyword = e;
				this.showList = this.dataList.filter((item)=>{
					return item.name.includes(e)
				});
			},
			//提交
			onSubmit(item, index){
				//处理点击添加时变色
				if(this.addTimer){
					clearTimeout(this.addTimer)
				}
				this.currAdd = index;
				this.addTimer = setTimeout(()=>{
					this.currAdd = -1;
					this.addTimer = null;
				}, 400)
				//提交
				this.$emit("event", item.func)
			}
		},
		watch:{
			//specialOptions为当前组件使用的数据集
			"dataSet.specialOptions":{
				immediate:true,
				handler(newVal){
					this.initData()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.vi_specialMenu{
	width: 100%;
	height: 100%;
	padding: 0.25em 0.5em;
	box-sizing: border-box;
	.vi_specialMenu_toolbar{
		height: 2em;
		margin-bottom: 0.5em;
	}
	.vi_specialMenu_scroll{
		height: calc(100% - 2.5em);
	}
	.vi_Row{
		display: flex;
		align-items: center;
		padding: 0.5em;
		overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
		&:nth-child(even){
			background-color: #f8f8f8;
		}
	}
	.vi_specialMenu_active{
		color: #c00;
		background-color: #fff5f5 !important;
	}
}
</style>